<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完善脚本</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<!--拖动组件脚本-->
<script src="/js/Sortable.min.js"></script>
<script src="/js/vuedraggable.umd.min.js"></script>
<style>
    /*表格操作栏 自定义样式*/
    .el-link {
        margin-right:8px;
    }
    .layadmin-tabsbody-item layui-show {
        padding:5px!important;
    }
    #completeScript {
        height:100%;
    }
    #search .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 74px);
    }
    /*翻页样式*/
    .el-pagination {
        margin-top: 5px;
    }
</style>
<div id="completeScript">
    <!--    查询框-->
    <el-card id="search">
        <el-form :inline="true" :model="scriptForm" class="demo-form-inline">
            <el-form-item label="脚本名称">
                <el-input clearable v-model="scriptForm.name" placeholder="请输入脚本名称" style="width:200px;"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button size="medium" type="primary" @click="searchScriptHandle" size="large">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="scriptList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="编号"
            width="90">
            </el-table-column>
            <el-table-column
                    prop="scriptName"
                    label="脚本名称">
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-link icon="el-icon-edit-outline" @click="editLines(scope.row.scriptid)" type="success">编辑台词</el-link>
                    <el-popconfirm title="确认要提交审核吗？" @confirm="addScriptCheck(scope.row.scriptid)">
                        <el-link slot="reference" icon="el-icon-document-add" type="primary">提交审核</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="scriptList.length">
        </el-pagination>
    </el-card>
</div>
<script>
    var scriptID;
    var completeScript = new Vue({
        el:"#completeScript",
        data(){
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 10,
                scriptForm:{
                    name:"",
                    createDate:"",
                    page:1,
                    size:9999999
                },
                scriptList:[]
            }
        },
        mounted(){
            //查询脚本
            this.searchScript();
        },
        methods:{
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //手动查询脚本
            searchScriptHandle(){
                if(this.scriptForm.name == ""){
                    this.$message.error("请输入脚本名称！")
                    return false;
                }else {
                    this.searchScript();
                }
            },
            //查询页码纠正
            deleteCorrect2(data){
                const totalPage = Math.ceil(data.length / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //查询脚本
            searchScript(){
                let params = {}
                let obj = this.scriptForm;
                Object.keys(obj).forEach(key=>{
                    params[key] = obj[key];
                });
                axios.get('/script/list_nocheck',{params}).then(res=>{
                    if(res.data.success){
                        this.scriptList = res.data.content;
                        this.deleteCorrect2(this.scriptList);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //编辑台词
            editLines(ID){
                //id存储赋值
                scriptID = ID;
                //打开弹窗
                layer.open({
                    type: 2,
                    title: '编辑台词',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['860px', '600px'],
                    content: '/dialog/script/scriptLines.html'
                });
            },
            //删除脚本
            scriptDelete(ID){
                let formData = new FormData();
                let arr = [];
                arr.push(ID);
                formData.append("id",arr);
                axios.post('/script/delete',formData).then(res=>{
                    if(res.data.success){
                        this.$message.success("删除成功！");
                        //刷新脚本列表
                        this.searchScript();
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //添加脚本审核
            addScriptCheck(id){
                console.log("要添加审核的脚本id是："+id);
                let formData = new FormData();
                formData.append("id",id);
                axios.post('/script/submit_check',formData).then(res=>{
                    if(res.data.success){
                        this.$message.success("添加成功！");
                        //刷新脚本列表
                        this.searchScript();
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }

        }
    })
</script>
</body>
</html>